<template>
    <div class="index">
        <div class="container">
            <div class="swiper-box">
                <swiper class="swiper" v-bind:options="swiperOption">
                    <swiper-slide v-for="(item,index) in slideList" v-bind:key="index">
                        <!-- <a v-bind:href="'/#/product/'+item.id"><img v-bind:src="item.img"></a> -->
                        <a href="/#/uploadSkill"><img v-bind:src="item.img"></a>
                    </swiper-slide>
                    <!-- Optional controls -->
                    <div class="swiper-pagination"  slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </swiper>
            </div>

            <div class="ads-box"></div>
            <div class="banner"></div>
            <div class="product-box"></div>
        </div>

        <div>
            <!-- BEGIN #promotions -->
            <div id="promotions" class="section-container bg-white">
                <!-- BEGIN container -->
                <div class="container">
                    <!-- BEGIN section-title -->
                    <h4 class="section-title clearfix" style="color: #2d81bd">
                        <a href="/#/product/12" class="pull-right">显示全部</a>
                        热销技能
                    </h4>
                    <!-- END section-title -->
                    <!-- BEGIN row -->
                    <div class="row row-space-10">
                        <!-- BEGIN col-6 -->
                        <div class="col-md-6">
                            <!-- BEGIN promotion -->
                            <div class="promotion promotion-lg bg-silver">
                                <div class="promotion-image text-right promotion-image-overflow-bottom">
                                    <img v-lazy="'/images/jineng/book/spain/spain-book.jpg'" alt="" style="width: 40%; height: 30%; margin-bottom: 40px;"/>
                                </div>
                                <div class="promotion-caption promotion-caption-inverse">
                                    <h4 class="promotion-title" style="color: black">西班牙语初级教学</h4>
                                    <p class="promotion-desc" style="color: black">西班牙语是世界第二大通用语，也是联合国的六大工作语言之一。 
    <br />本课程面向西班牙语零起点学生，目的是让第一次接触西班牙语的学习者能在较短时间内轻松而全面地掌握西班牙语。</p>
                                    <a href="#" class="promotion-btn" style="color: black">了解更多</a>
                                </div>
                            </div>
                            <!-- END promotion -->
                        </div>
                        <!-- END col-6 -->
                        <!-- BEGIN col-3 -->
                        <div class="col-md-3 col-sm-6">
                            <!-- BEGIN promotion -->
                            <div class="promotion bg-blue">
                                <div class="promotion-image promotion-image-overflow-bottom promotion-image-overflow-top">
                                    <img v-lazy="'/images/jineng/sports/pingpong/pingpong-1.jpg'" alt="" />
                                </div>
                                <div class="promotion-caption promotion-caption-inverse text-right">
                                    <h4 class="promotion-title">乒乓球教学</h4>
                                    <div class="promotion-price"><small>from</small> 50.00</div>
                                    <p class="promotion-desc">教授乒乓球运动战术</p>
                                    <a href="#" class="promotion-btn">了解更多</a>
                                </div>
                            </div>
                            <!-- END promotion -->
                            <!-- BEGIN promotion -->
                            <div class="promotion bg-silver" id="swim">
                                <div class="promotion-image text-center promotion-image-overflow-bottom">
                                    <img v-lazy="'/images/jineng/sports/swimming/swim-2.png'" alt="" />
                                </div>
                                <div class="promotion-caption text-center">
                                    <h4 class="promotion-title">游泳教学</h4>
                                    <div class="promotion-price" style="color: white"><small>from</small> 45.00</div>
                                    <p class="promotion-desc" style="color: white">蝶泳腿部技术和蝶泳划臂姿势</p>
                                    <a href="#" class="promotion-btn" style="color: white">了解更多</a>
                                </div>
                            </div>
                            <!-- END promotion -->
                        </div>
                        <!-- END col-3 -->
                        <!-- BEGIN col-3 -->
                        <div class="col-md-3 col-sm-6">
                            <!-- BEGIN promotion -->
                            <div class="promotion bg-silver" id="photoshop">
                                <div class="promotion-image promotion-image-overflow-right promotion-image-overflow-bottom text-right">
                                    <img v-lazy="'/images/jineng/computer/ps/ps.jpg'" alt="" />
                                </div>
                                <div class="promotion-caption text-center">
                                    <h4 class="promotion-title" style="color: white">photoshop教学</h4>
                                    <div class="promotion-price" style="color: white"><small>from</small> 70.00</div>
                                    <p class="promotion-desc" style="color: white"> 掌握Logo设计</p>
                                    <a href="#" class="promotion-btn" style="color: white">了解更多</a>
                                </div>
                            </div>
                            <!-- END promotion -->
                            <!-- BEGIN promotion -->
                            <div class="promotion bg-black" id="guitar">
                                <div class="promotion-image text-right">
                                    <img v-lazy="'/images/jineng/art/guitar/guitar.jpg'" alt="" />
                                </div>
                                <div class="promotion-caption promotion-caption-inverse">
                                    <h4 class="promotion-title">零基础吉他教学</h4>
                                    <div class="promotion-price"><small>from</small> 60.00</div>
                                    <p class="promotion-desc">零基础教授空弦与节奏控制</p>
                                    <a href="#" class="promotion-btn">了解更多</a>
                                </div>
                            </div>
                            <!-- END promotion -->
                        </div>
                        <!-- END col-3 -->
                    </div>
                    <!-- END row -->
                </div>
                <!-- END container -->
            </div>
            <!-- END #promotions -->

            <!-- BEGIN #trending-items 促销商品 -->
            <div id="trending-items" class="section-container bg-silver">
                <!-- BEGIN container -->
                <div class="container">
                    <!-- BEGIN section-title -->
                    <h4 class="section-title clearfix" style="color: #2d81bd">
                        <a href="/#/product/12" class="pull-right">显示全部</a>
                        促销商品
                    </h4>
                    <!-- END section-title -->
                    <!-- BEGIN row -->
                    <div class="row row-space-10">
                        <!-- BEGIN col-2 -->
                        <div class="col-md-2 col-sm-4" v-for="(item,index) in promotionalProduct" v-bind:key="index">
                            <!-- BEGIN item -->
                            <div class="item item-thumbnail">
                                <a href="product_detail.html" class="item-image">
                                    <img v-lazy="item.img" alt="" />
                                </a>
                                <div class="item-info">
                                    <h4 class="item-title">
                                        <a href="product_detail.html">{{item.name}}</a>
                                    </h4>
                                    <p class="item-desc">{{item.desc}}</p>
                                    <div class="item-price" @click="addCart(item.id)">{{item.price}}</div>
                                    <div class="item-discount-price">{{item.discountPrice}}</div>
                                </div>
                            </div>
                            <!-- END item -->
                        </div>
                        <!-- END col-2 -->
                    </div>
                    <!-- END row -->
                </div>
                <!-- END container -->
            </div>
            <!-- END #trending-items -->
            
            <!-- BEGIN #mobile-list -->
            <div id="mobile-list" class="section-container bg-silver p-t-0">
                <!-- BEGIN container -->
                <div class="container">
                    <!-- BEGIN section-title -->
                    <h4 class="section-title clearfix" style="color: #2d81bd">
                        <a href="/#/product/12" class="pull-right">显示全部</a>
                        热门书籍
                    </h4>
                    <!-- END section-title -->
                    <!-- BEGIN category-container -->
                    <div class="category-container">
                        <!-- BEGIN category-sidebar-->
                        
                        <div class="category-sidebar" id="app" >
                            <ul class="category-list" >
                                <li class="list-header">排行榜</li>
                                <li><a href="#"></a></li>
                            </ul>
                        </div>
                        <!-- END category-sidebar -->
                        <!-- BEGIN category-detail -->
                        <div class="category-detail">
                            <!-- BEGIN category-item -->
                            <a href="#" class="category-item full">
                                <div class="item">
                                    <div class="item-cover">
                                        <img v-lazy="'/images/note-1.jpg'" alt="" />
                                    </div>
                                    <div class="item-info bottom">
                                        <h4 class="item-title">高数A1-A4全套笔记</h4>
                                        <p class="item-desc">学霸高数笔记</p>
                                        <div class="item-price">35.00</div>
                                    </div>
                                </div>
                            </a>
                            <!-- END category-item -->
                            <!-- BEGIN category-item -->
                            <div class="category-item list">
                                <!-- BEGIN item-row -->
                                <div class="item-row" v-for="(arr,i) in hotBooks" v-bind:key="i">
                                    <!-- BEGIN item -->
                                    <div class="item item-thumbnail" v-for="(item,j) in arr" v-bind:key="j">
                                        <a href="/#/product/35" class="item-image">
                                            <img v-lazy="item.img" alt="" />
                                            <div class="discount">{{item.discount}}</div>
                                        </a>
                                        <div class="item-info">
                                            <h4 class="item-title">
                                                <a href="/#/product/35">{{item.title}}</a>
                                            </h4>
                                            <div class="item-price" @click="addCart(item.id)">{{item.price}}</div>
                                            <div class="item-discount-price">{{item.discountPrice}}</div>
                                        </div>
                                    </div>
                                    <!-- END item -->
                                </div>
                                <!-- END item-row -->
                            </div>
                            <!-- END category-item -->
                        </div>
                        <!-- END category-detail -->
                    </div>
                    <!-- END category-container -->
                </div>
                <!-- END container -->
            </div>
            <!-- END #mobile-list -->
            
            <!-- BEGIN #tablet-list -->
            <div id="tablet-list" class="section-container bg-silver p-t-0">
                <!-- BEGIN container -->
                <div class="container" style="padding-top:40px;">
                    <!-- BEGIN section-title -->
                    <h4 class="section-title clearfix" style="color: #2d81bd">
                        <a href="/#/product/12" class="pull-right">显示全部</a>
                        热门技能
                    </h4>
                    <!-- END section-title -->
                    <!-- BEGIN category-container -->
                    <div class="category-container">
                        <!-- BEGIN category-sidebar -->
                        <div class="category-sidebar" id="app">
                            <ul class="category-list">
                                <li class="list-header">排行榜</li>
                                <li><a href="#">PowerPoint制作模板技术</a></li>
                                <li><a href="#">Excel数据表格</a></li>
                                <li><a href="#">Spss数据分析</a></li>
                                <li><a href="#">前端开发基础</a></li>
                                <li><a href="#">Photoshop人像p图</a></li>
                                <li><a href="#">吉他弹奏教学</a></li>
                            </ul>
                        </div>
                        <!-- END category-sidebar -->
                        <!-- BEGIN category-detail -->
                        <div class="category-detail">
                            <!-- BEGIN category-item -->
                            <a href="#" class="category-item full">
                                <div class="item">
                                    <div class="item-cover">
                                        <img v-lazy="'/images/西班牙书.jpg'" alt="" />
                                    </div>
                                    <div class="item-info bottom">
                                        <h4 class="item-title">西班牙语教学</h4>
                                        <p class="item-desc">零基础学习西班牙语</p>
                                        <div class="item-price">50.00/周</div>
                                    </div>
                                </div>
                            </a>
                            <!-- END category-item -->
                            <!-- BEGIN category-item -->
                            <div class="category-item list">
                                <!-- BEGIN item-row -->
                                <div class="item-row"  v-for="(arr,i) in hotSkills" v-bind:key="i">
                                    <!-- BEGIN item -->
                                    <div class="item item-thumbnail" v-for="(item,j) in arr" v-bind:key="j">
                                        <a href="/#/detail/35" class="item-image">
                                            <img v-lazy="item.img" alt="" />
                                            <div class="discount">{{item.discount}}</div>
                                        </a>
                                        <div class="item-info">
                                            <h4 class="item-title">
                                                <a href="/#/detail/35">{{item.title}}</a>
                                            </h4>
                                            <div class="item-price" @click="addCart(item.id)">{{item.price}}</div>
                                            <div class="item-discount-price">{{item.discountPrice}}</div>
                                        </div>
                                    </div>
                                    <!-- END item -->
                                    
                                </div>
                                <!-- END item-row -->
                                
                            </div>
                            <!-- END category-item -->
                        </div>
                        <!-- END category-detail -->
                    </div>
                    <!-- END category-container -->
                </div>
                <!-- END container -->
            </div>
            <!-- END #tablet-list -->

            
            
        </div>
        
        <service-bar></service-bar>
        <modal
            title="友情提示"
            sureText="查看购物车"
            btnType="1"
            modalType="middle"
            v-bind:showModal="showModal"
            v-on:submit="goToCart"
            v-on:cancel="showModal=false"
            >
            <template v-slot:body>
                <p>商品添加成功！</p>
            </template>
        </modal>
    </div>
    
</template>
<script>
    
    import ServiceBar from './../components/ServiceBar'
    import Modal from './../components/Modal'
    // require styles
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'
    export default {
        name:'index',
        components:{
            swiper,
            swiperSlide,
            ServiceBar,
            Modal
        },
        data(){
            return {
                swiperOption:{
                    autoplay:true,
                    loop:true,
                    effect:'cube',
                    cubeEffect: {
                        slideShadows: true,
                        shadow: true,
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },
                slideList:[
                    {
                        id:'11',
                        img:'images/slider/slide-1.png'
                    },
                    {
                        id:'12',
                        img:'images/slider/slide-2.png'
                    },
                    {
                        id:'13',
                        img:'images/slider/slide-3.png'
                    }
                ],
                hotSellingSkills:[[1,1],[1,1]],
                promotionalProduct:[
                    {
                        id:20,
                        img:'images/book/gaoshu/book-1.jpg',
                        name:'高数A1笔记',
                        desc:'高数A1笔记，包含重点',
                        price:'12.00',
                        discountPrice:'20.00'
                    },
                    {
                        id:20,
                        img:'images/book/gaoshu/book-1.jpg',
                        name:'高数A1笔记',
                        desc:'高数A1笔记，包含重点',
                        price:'12.00',
                        discountPrice:'20.00'
                    },
                    {
                        id:20,
                        img:'images/book/gaoshu/book-1.jpg',
                        name:'高数A1笔记',
                        desc:'高数A1笔记，包含重点',
                        price:'12.00',
                        discountPrice:'20.00'
                    },
                    {
                        id:20,
                        img:'images/book/gaoshu/book-1.jpg',
                        name:'高数A1笔记',
                        desc:'高数A1笔记，包含重点',
                        price:'12.00',
                        discountPrice:'20.00'
                    },
                    {
                        id:20,
                        img:'images/book/gaoshu/book-1.jpg',
                        name:'高数A1笔记',
                        desc:'高数A1笔记，包含重点',
                        price:'12.00',
                        discountPrice:'20.00'
                    },
                    {
                        id:20,
                        img:'images/book/gaoshu/book-1.jpg',
                        name:'高数A1笔记',
                        desc:'高数A1笔记，包含重点',
                        price:'12.00',
                        discountPrice:'20.00'
                    }
                ],
                hotBooks:[
                    [
                        {
                            id:30,
                            img:'images/book/note/note-1.jpg',
                            discount:'33% OFF',
                            title:'大物B1笔记',
                            price:'20.00',
                            discountPrice:'30.00'
                        },
                        {
                            id:31,
                            img:'images/book/english/book-1.jpg',
                            discount:'37% OFF',
                            title:'大学综合英语',
                            price:'22.00',
                            discountPrice:'35.00'
                        },
                        {
                            id:32,
                            img:'images/book/maogai/book-1.jpg',
                            discount:'50% OFF',
                            title:'毛概2018版',
                            price:'15.00',
                            discountPrice:'30.00'
                        }
                    ],
                    [
                        {
                            id:33,
                            img:'images/book/gaoshu/book-1.jpg',
                            discount:'33% OFF',
                            title:'高数A1笔记',
                            price:'20.00',
                            discountPrice:'30.00'
                        },
                        {
                            id:34,
                            img:'images/book/economics/book-1.jpg',
                            discount:'44% OFF',
                            title:'西方经济学',
                            price:'28.00',
                            discountPrice:'50.00'
                        },
                        {
                            id:35,
                            img:'images/book/note/note-2.jpg',
                            discount:'20% OFF',
                            title:'统计学笔记',
                            price:'12.00',
                            discountPrice:'15.00'
                        }
                    ]
                ],
                hotSkills:[
                    [
                        {
                            id:40,
                            img:'images/jineng/computer/video_clip/clip-1.jpg',
                            discount:'33% OFF',
                            title:'视频剪辑教学',
                            price:'20.00/天',
                            discountPrice:'30.00/天'
                        },
                        {
                            id:41,
                            img:'images/jineng/sports/pingpong/pingpong-1.jpg',
                            discount:'25% OFF',
                            title:'乒乓球教学',
                            price:'15.00/天',
                            discountPrice:'20.00/天'
                        },
                        {
                            id:42,
                            img:'images/jineng/computer/ppt/ppt.png',
                            discount:'40% OFF',
                            title:'零基础ppt教学',
                            price:'30.00/周',
                            discountPrice:'50.00/天'
                        }
                    ],
                    [
                        {
                            id:43,
                            img:'images/jineng/art/guitar/guitar1.jpg',
                            discount:'17% OFF',
                            title:'吉他教学',
                            price:'10.00/天',
                            discountPrice:'12.00/天'
                        },
                        {
                            id:44,
                            img:'images/jineng/sports/swimming/swim-2.jpg',
                            discount:'25% OFF',
                            title:'游泳教学',
                            price:'450.00/月',
                            discountPrice:'600.00/月'
                        },
                        {
                            id:45,
                            img:'images/jineng/computer/ps/ps.jpg',
                            discount:'33% OFF',
                            title:'Photoshop教学',
                            price:'10.00/天',
                            discountPrice:'15.00/天'
                        }
                    ]
                ],
                showModal:false
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            //调用学习视频中接口的，没用
            init(){
                this.axios.get('/products',{
                    params:{
                        categoryId:100012,
                        pageSize:14
                    }
                }).then((res)=>{
                    //slice分割，不会改变原数组，splice会改变原数组
                    res.list = res.list.slice(6,14);
                    this.phoneList = [res.list.slice(0,4),res.list.slice(4,8)];
                })
            },
            addCart(){
                this.showModal = true;
                // this.axios.post('/carts',{
                //     productId:id,
                //     selected: true
                // }).then((res)=>{
                //     this.showModal = true;
                //     this.$store.dispatch('saveCartCount',res.cartTotalQuantity);
                // }).catch(()=>{
                //     this.showModal = true;
                // });
            },
            goToCart(){
                this.$router.push('/cart');
            }
        }
    }
</script>
<style lang="scss">
    @import './../assets/scss/style-responsive.min.scss';    
    @import './../assets/scss/style.min.scss';
    @import './../assets/scss/mixin.scss';
    .index{
        .container{
            height: auto;
            .swiper-box{
                width: auto;
                .swiper-container{
                    margin-top: 4rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .section-container{
            .item-price{
                cursor:pointer;
                &:after{
                    @include bgImg(16px,16px,'/images/icon/icon-cart-hover.png');
                    content:' ';
                    margin-left:5px;
                    vertical-align: middle;
                  }
            }
        }
    }
    
</style>